enum Themes {
    LIGHT = 'light',
    DARK = 'dark'
}
export const useTheme = () => {
    const themes: Themes[] = [Themes.LIGHT, Themes.DARK]
    const currentTheme = ref(Themes.DARK)
    const defaultTheme = Themes.DARK
    const setTheme = (themeName: Themes) => {
        if (!themeName) return

        // 应用CSS变量到根元素
        const root = document.documentElement

        // 更新HTML class
        root.setAttribute('data-theme', themeName)
        // themes.map(theme => root.classList.remove(theme))
        // root.classList.add(themeName)
        // 更新状态
        currentTheme.value = themeName

        // 持久化到localStorage
        if (process.client) {
            localStorage.setItem('theme', themeName)
        }
    }

    // 初始化主题
    const initTheme = () => {
        if (process.client) {
            const savedTheme = localStorage.getItem('theme') || defaultTheme
            setTheme(savedTheme as Themes)
        }
    }

    // 切换主题
    const toggleTheme = () => {
        const newTheme = currentTheme.value === Themes.DARK ? Themes.LIGHT : Themes.DARK
        setTheme(newTheme as Themes)
    }

    return {
        themes,
        currentTheme,
        setTheme,
        initTheme,
        toggleTheme
    }
}